<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="../lib/metro.css" rel="stylesheet">

    <title>Test Tag input - Metro UI :: Popular HTML, CSS and JS library</title>

    <style>
        * + .example {
            margin-top: 20px;
        }
    </style>
</head>
<body class="m4-cloak">
<div class="container">
    <h1>Tag input test page</h1>

    <div class="example">
        <div>Autocomplete</div>
        <input type="text" data-role="tag-input" data-random-color="true" data-autocomplete="Ukraine, USA, Canada, Marokko, Singapur">
        <p class="text-small">Tags have a random color</p>
    </div>

<!--    <div class="example">-->
<!--        <div>Autocomplete</div>-->
<!--        <input type="text" data-role="tag-input" data-random-color="true" data-autocomplete-url="../data/autocomplete.txt">-->
<!--        <p class="text-small">Autocomplete from txt file</p>-->
<!--    </div>-->

<!--    <div class="example">-->
<!--        <div>Autocomplete</div>-->
<!--        <input type="text" data-role="tag-input" data-random-color="true" data-autocomplete-url="../data/autocomplete-key.json" data-autocomplete-url-key="countries">-->
<!--        <p class="text-small">Autocomplete from json file</p>-->
<!--    </div>-->

    <div class="example">
        <input type="text" data-role="tag-input" data-random-color="true" value="1, 2, 3, 4">
        <p class="text-small">Tags have a random color</p>
    </div>

    <div class="example">
        <input type="text" data-role="tag-input" data-random-color="true" value="1, 2, 3, 4">
    </div>

    <div class="example">
        <input type="text" data-role="tag-input" data-random-color="true" class="input-small" value="1, 2, 3, 4">
    </div>

    <div class="example">
        <input type="text" data-role="tag-input" data-random-color="true" data-label="Tags:" value="1, 2, 3, 4">
    </div>

    <div class="example">
        <input id="refill" type="text" data-role="tag-input" data-random-color="true" data-label="Tags:" value="1, 2, 3, 4">
        <div class="mt-4">
            <button class="button" onclick="refill()">Refill</button>
            <button class="button" onclick="append()">Append</button>
        </div>
    </div>

</div>

<script src="../lib/metro.js"></script>
<script>
    function refill(){
        var input = Metro.getPlugin("#refill", "tag-input");
        input.val([5, 6, 7]);
        console.log(input.val(), input.elem.value);
    }
    function append(){
        var input = Metro.getPlugin("#refill", "tag-input");
        input.append([5, 6, 7]);
        console.log(input.val(), input.elem.value);
    }
</script>
</body>
</html>
